<template>
	<view class="wrap">
		<view class="user-box u-flex">
			<image src="../../static/2.jpg" class="head-img"></image>
			<view class="user-info-box u-flex u-flex-column u-flex-between">
				<view class="user-info u-flex" @tap="goPage('/pages/uc/editUserInfo')">
					<text class="nickname">前端开发两年半前端开发两年半</text>
					<u-icon name="edit-pen" color="#000" size="24"></u-icon>
				</view>
				<image class="vip-icon" src="../../static/user/VIP.png"></image>
			</view>
		</view>
		<view class="func-box">
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/identity')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>身份</text>
					<view class="flexWrapNo">
						已认证
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/member')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>会员</text>
					<view class="flexWrap">
						<text class="tips">还有57天到期</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/album')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>相册</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/contact')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>联系方式</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/share')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>邀请好友来相亲</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/set')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>设置</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="func-item flexWrapNo" @tap="goPage('/pages/uc/archivesList')">
				<image src="../../static/user/VIP.png" class="func-icon"></image>
				<view class="item-right flexWrap">
					<text>发布档案</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.wrap{
		padding: 30upx;
		background: #fff;
	}
	.user-box{
		.head-img{
			width: 140upx;
			height: 140upx;
			border-radius: 20upx;
			overflow: hidden;
			margin-right: 30upx;
		}
		.user-info-box{
			height: 140upx;
			.user-info{
				.nickname{
					font-weight: bold;
					font-size:32upx;
					width: 300upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					margin-right: 10upx;
				}
			}
			.vip-icon{
				width: 60upx;
				height: 60upx;
			}
		}
	}
	.func-box{
		margin-top: 30upx;
		flex-wrap: wrap;
		background: #FFFFFF;
		.func-item{
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 400;
			flex: auto;
			border-bottom: 1rpx solid #E1E5ED;
			padding:30upx 0;
			.func-icon{
				width: 54upx;
				height: 54upx;
				margin-right: 23upx;
			}
			&:nth-last-of-type(1){
				.item-right{
					border-bottom: none;
				}
			}
			.item-right{
				flex: auto;
				.tips{
					color: darkorange;
				}
				.icon-more{
					border-color:gray;
					width: 14upx;
					height: 14upx;
				}
			}
		}
	}
</style>
